<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>登陆首页</title>
    <script src = "${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src = "${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
</head>
<body>
<h1>用户登录页面</h1>
<h1>欢迎</h1>
<h3>${msg}</h3>
<form method="post" action="${pageContext.request.contextPath}/login">
    <div class="row">
        <div class="form-group">
            <div class="col-md-1">用户名:</div>
            <div class="col-md-3"><input type="text" class="form-control" name="username"></div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-1">密码:</div>
            <div class="col-md-3"><input type="password" class="form-control" name="password"></div>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
            <div class="col-md-1">邮箱:</div>
            <div class="col-md-3"><input id="email" type="text" class="form-control" name="email"></div>
            <div class="col-md-1">
                <button id="emailBtn" class="btn btn-danger">发送验证码</button>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
            <div class="col-md-1">验证码:</div>
            <div class="col-md-3"><input type="text" class="form-control" name="code"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-offset-3">
            <input class="btn btn-primary" type="submit" value="登录">
        </div>
    </div>
</form>

<script>
    $(function () {
        $("#emailBtn").click(function (event) {
            // 阻止表单提交事件
            event.preventDefault();
            let email = $("#email").val();
            $.ajax({
                url: '${pageContext.request.contextPath}/sendEmail?email=' + email,
                method: 'GET',
                success: function (res) {
                    console.log(res);
                }
            });
        });

    });
</script>

</body>

</html>